<#import "/manage/tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="商品管理">
<div class="xm-product">
    <div class="row">
        <div class="panel">
            <div class="panel-header">
                <strong>新增商品</strong>
            </div>
            <div class="panel-body">
                <div class="flow-steps">
                    <ol class="num3">
                        <li class="firs current">基本信息</li>
                        <li class="">属性规格</li>
                        <li class="last">库存信息</li>
                    </ol>
                </div>
                <form id="addForm" class="form-horizontal" action="${basepath}/manage/product/insertJson" method="post">
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品名称：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="name" placeholder="请输入商品名称">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品标题：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="title">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品类别：
                        </label>

                        <div class="controls">
                            <input type="text" id="show">
                            <input type="hidden" id="hide" value="4" name="catalogID">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            是否新品：
                        </label>
                        <div class="controls">
                            <select data-rules="{required:true}" name="isnew">
                                <option value="">-请选择-</option>
                                <option value="y">是</option>
                                <option value="n">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            是否特价：
                        </label>
                        <div class="controls">
                            <select data-rules="{required:true}" name="sale">
                                <option value="">-请选择-</option>
                                <option value="y">是</option>
                                <option value="n">否</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品详情：
                        </label>
                        <div class="controls control-row4" style="height: 350px;">
                            <textarea type="text" class="input-large" name="productHTML" id="productHTML"></textarea>
                        </div>
                    </div>
                    <h3 class="offset2">商品图片
                        <a class="button button-primary pull-right" id="imagesBtn" style="height:20px">新增</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " name="images" id="productImgs">

                    <div id="imagesGrid" class="xm-grid">

                    </div>
                    <div class="centered">
                        <button type="submit" class="button  button-large  button-success">下一步</button>
                    </div>
                </form>
                <div id="specList" style="display: none">
                    <h3 class="offset2">商品规格
                        <a class="button button-primary pull-right" href="javascript:addSpec()">新增</a>
                    </h3>
                    <hr>
                    <div id="specGrid" class="xm-grid">
                    </div>
                    <div class="centered">
                        <a class="button  button-large  button-success" href="javascript:setStep('skuList')">下一步</a>
                    </div>
                </div>
                <div id="skuList" style="display: none">
                    <h3 class="offset2">库存信息
                        <a class="button button-primary pull-right" href="javascript:addSku()">新增</a>
                    </h3>
                    <hr>
                    <div id="skuGrid" class="xm-grid">

                    </div>
                    <div class="centered">
                        <a class="button  button-large  button-success">立即上架</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="addSpecContent" style="display:none;">
    <form id="addSpecForm" class="form-horizontal" action="${basepath}/manage/product/insertSpecJson" method="post">
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">规格名称：</label>

                <div class="controls">
                    <input type="text" class="input-normal control-text" name="specName" data-rules="{required : true}">
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">规格类型：</label>

                <div class="controls">
                    <input type="hidden" name="productID">
                    <input type="text" class="input-normal control-text" name="specType" data-rules="{required : true}">
                </div>
            </div>
        </div>
    </form>
</div>
<div id="addSkuContent" style="display:none;">
    <form id="addSkuForm" class="form-horizontal" action="${basepath}/manage/product/insertSkuJson" method="post">
        <div class="row">
            <div class="control-group span16" id="skuNum">
                <label class="control-label">库存：</label>
                <div class="controls">
                    <input type="hidden" name="productID">
                    <input type="hidden" name="specIDS" id="specIDS">
                    <input type="text" class="input-normal control-text" name="skuStock" data-rules="{required : true}">
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">原价：</label>
                <div class="controls">
                    <input type="text" class="input-normal control-text" name="skuPrice" data-rules="{required : true}">
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">现价：</label>
                <div class="controls">
                    <input type="text" class="input-normal control-text" name="skuNowPrice" data-rules="{required : true}">
                </div>
            </div>

        </div>
    </form>
</div>

<script type="text/javascript">
    var editor = UE.getEditor('productHTML' );
    var Grid = BUI.Grid;
    var Store = BUI.Data.Store;
    var Data = BUI.Data;
    var addForm = new BUI.Form.Form({
        srcNode: '#addForm',
        submitType: 'ajax',
        callback: function (data) {
            if (data.success == true) {
                console.log(data.data)
                $("input[name='productID']").val(data.data);
                setStep("specList");
            } else {

            }
        }
    }).render();
    /**
     * 设置步骤
     * @param id
     */
    function setStep(id) {
        $("#addForm").hide();
        $("#specList").hide();
        $("#skuList").hide();
        if(id=="skuList"){
            setSkuForm();
        }
        $("#" + id).show();

    }

    /*--------------------------产品图片列表  begin--------------------*/
    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {
            title: '图片', dataIndex: 'url', width: '30%', renderer: function (data) {
            return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'
        }
        },
        {
            title: '状态', dataIndex: 'state', width: '30%', renderer: function (data) {
            if (data == "SUCCESS") {
                return "上传成功";
            }
            return "上传失败";
        }
        },
        {
            title: '操作', dataIndex: 'title', width: '40%', renderer: function (data, obj, index) {
            return '<a href="javascript:delImages(' + index + ')">删除</a>';
        }
        }
    ];
    /**
     * 删除缓存图片信息
     * @param index
     */
    function delImages(index) {
        var record = imagesStore.findByIndex(index);
        imagesStore.remove(record);
        var imgs = imagesStore.getResult();
        var imgArr = new Array();
        for (var i = 0; i < imgs.length; i++) {
            imgArr[i] = imgs[i].url
        }
        $("#productImgs").val(imgArr.join(","));
    }
    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    });
    imagesGrid.render();
    /*--------------------------产品图片列表  end--------------------*/


    /*--------------------------产品规格列表  begin--------------------*/

    /**
     * 规格信息
     * @type {*[]}
     */
    var specColumns = [
        {title: '规格名称', dataIndex: 'specName', width: '20%'},
        {title: '规格类型', dataIndex: 'specType', width: '20%'},
        {
            title: '操作', dataIndex: 'id', width: '40%', renderer: function (data) {
                    return '<a href="javascript:delSpec(\'' + data + '\')">删除</a>';
             }
        }
    ];
    var specStore = new Store({});
    var specGrid = new Grid.Grid({
        render: '#specGrid',
        width: '100%',
        columns: specColumns,
        store: specStore
    });
    specGrid.render();
    /**
     * 删除规格信息
     * @param index
     */
    function delSpec(id) {
        var record = specStore.find('id', id);
        $.ajax({
            type: "POST",
            url: "${basepath}/manage/product/delSpecJson",
            dataType: "json",
            data: {
                id: id
            },
            success: function (data) {
                if (data.success)
                    specStore.remove(record);
            }
        });

    }

    /*--------------------------产品规格列表  end---------------------------*/
    /*--------------------------产品库存列表  begin--------------------*/

    /**
     * 库存信息
     * @type {*[]}
     */
    var skuColumns = [
        {title: '规格组合', dataIndex: 'specIDS', width: '20%'},
        {title: '库存', dataIndex: 'skuStock', width: '20%'},
        {title: '原价', dataIndex: 'skuPrice', width: '20%'},
        {title: '现价', dataIndex: 'skuNowPrice', width: '20%'},
        {
            title: '操作', dataIndex: 'id', width: '40%', renderer: function (data) {
            return '<a href="javascript:delSku(\'' + data + '\')">删除</a>';
        }
        }
    ];
    var skuStore = new Store({});
    var skuGrid = new Grid.Grid({
        render: '#skuGrid',
        width: '100%',
        columns: skuColumns,
        store: skuStore
    });
    skuGrid.render();
    /**
     * 删除规格信息
     * @param index
     */
    function delSku(id) {
        var record = specStore.find('id', id);
        $.ajax({
            type: "POST",
            url: "${basepath}/manage/product/delSkuJson",
            dataType: "json",
            data: {
                id: id
            },
            success: function (data) {
                if (data.success)
                    skuStore.remove(record);
            }
        });

    }

    /*--------------------------产品规格列表  end---------------------------*/

    /*------------------------图片上传插件配置  begin-----------------------*/
    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    uploader.on('uploadSuccess', function (file, response) {
        uploader.removeFile(file);
        imagesStore.add(response);
        var imgs = imagesStore.getResult();
        var imgArr = new Array();
        for (var i = 0; i < imgs.length; i++) {
            imgArr[i] = imgs[i].url
        }
        $("#productImgs").val(imgArr.join(","));
    });
    /*------------------------图片上传插件配置  end-----------------------*/
    BUI.use(['bui/extensions/treepicker', 'bui/tree', 'bui/data'], function (TreePicker, Tree, Data) {
        var store = new Data.TreeStore({
                    root: {
                        id: '0',
                        text: '0'
                    },
                    map: {
                        name: 'text'
                    },
                    url: '${basepath}/manage/catalog/selectAll',
                    autoLoad: true
                }),
                tree = new Tree.TreeList({
                    store: store,
                    showLine: true
                });

        var picker = new TreePicker({
            trigger: '#show',
            valueField: '#hide',
            width: 150,
            children: [tree]
        });
        picker.render();
    });

    /*----------------------------------------------新增规格表单处理 begin------------------------------------*/
    var addSpecForm = new BUI.Form.Form({
        srcNode: '#addSpecForm',
        submitType: 'ajax',
        callback: function (data) {
            specStore.add(data.data);
            addSpecDialog.close();
        }
    }).render();

    var addSpecDialog = new BUI.Overlay.Dialog({
        title: '新增产品规格',
        width: 500,
        height: 380,
        contentId: 'addSpecContent',
        success: function () {
            if (addSpecForm.isValid()) {
                addSpecForm.ajaxSubmit();
            } else {
                addSpecForm.valid();
            }
        }
    });
    /**
     *规格新增按钮事件
     */
    function addSpec() {
        addSpecDialog.show();
    }
    /*----------------------------------------------新增规格表单处理 end------------------------------------*/
    /*----------------------------------------------新增库存表单处理 begin------------------------------------*/
    var addSkuForm = new BUI.Form.Form({
        srcNode: '#addSkuForm',
        submitType: 'ajax',
        callback: function (data) {
            skuStore.add(data.data);
            addSkuDialog.close();
        }
    });
    var addSkuDialog = new BUI.Overlay.Dialog({
        title: '新增产品库存',
        width: 500,
        height: 380,
        contentId: 'addSkuContent',
        success: function () {
            var specArr= specStore.getResult();
            var specIDArr= new Array();
            $.each(specArr,function(index,item){
                specIDArr[index]=$("#"+item.id).val();
            });
            $("#specIDS").val(specIDArr.join(","));
            if (addSkuForm.isValid()) {
                addSkuForm.ajaxSubmit();
            } else {
                addSkuForm.valid();
            }
        }
    });
    /**
     *库存新增按钮事件
     */
    function addSku() {
        addSkuDialog.show();
    }

    /**
     * 设置规格选项
     */
    function setSkuForm(){
        var specArr= specStore.getResult();
        $.each(specArr,function(index,item){
            var specTypeArr = item.specType.split(",")
            var selctHtml='<div class="control-group span16">';
            selctHtml+='<label class="control-label">'+item.specName+'：</label>';
            selctHtml+='<div class="controls"><select data-rules="{required:true}" id="'+item.id+'">';
            for(var i=0;i<specTypeArr.length;i++){
                selctHtml+='<option value="'+specTypeArr[i]+'">'+specTypeArr[i]+'</option>';
            }
            selctHtml+='</select></div></div>';
            $("#skuNum").before(selctHtml);
        });
        addSkuForm.render();
    }



    /**----------------------------------------------新增库存表单处理 end------------------------------------**/

</script>

</@page.pageBase>